<template>
  <div class="page_receivedStock">

    <van-sticky>
      <!-- $route.query.num -->
      <van-nav-bar
        :title="'我已领取的股份：'+total"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-icon
            :name="!searchBoxShow ? 'search' : 'close'"
            size="20"
            @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!params.keyword)"
            style="font-size: 20px;"
          />
          <van-dropdown-menu >
            <van-dropdown-item @change="_getStocks(collectType)" v-model="collectType" :options="collectops" />
          </van-dropdown-menu>
        </template>
      </van-nav-bar>

      <van-search
        v-show='searchBoxShow'
        v-model="params.keyword"
        placeholder="搜索手机号，用户昵称"
        show-action
        shape="round"
        @search="handleSearch"
        @clear="toClearKeyWord"
      >
        <div slot="action" @click="handleSearch">搜索</div>
      </van-search>

    </van-sticky>

    <div v-if="userInfoList.length" >
      <user-info
        v-for="(item) in userInfoList"
        :itemObj="item"
        :key="item.rowid"
      >
        <div class="right-detail" >
          <div class="isReceived"><van-tag type="success">已领取{{item.take_stock}}股</van-tag></div>
          <!-- <div class="detail"><van-button type="info" size="small" @click="toApplyDetail(item)">详情</van-button></div> -->
        </div>
        <template slot="extslot">
            <div>
              <div style="margin:5px 0">来源类型：{{item.receive_type||"未知"}}</div>
              <div style="margin:5px 0;white-space: nowrap;">领取时间：{{item.receive_time}}</div>
            </div>
          </template>
      </user-info>


      <van-pagination
        v-show="total > 0"
        style="margin: 10px 0"
        v-model="params.pageIndex"
        :total-items="total"
        :items-per-page="params.pageSize"
        @change="changePagination"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>

    </div>

    <van-divider style="margin-top: 100px" v-else>无记录</van-divider>
    
  </div>
</template>

<script>
import UserInfo from './components/userInfo';
import logoImg from '@/assets/logo.png';
import { Toast } from "vant";
import {mapGetters} from "vuex"
export default {
  components: {
    UserInfo,
  },
  data(){
    return {
      collectType:"receive",
      collectops: [
        // { text: '全部', value: "" },
        { text: '主动扫码已领取', value: "receive" },
        { text: '被动扫码已领取', value: "scann" },
        { text: '推广用户主动被动扫码领取', value: "receivepar" },
        { text: '工作已领取', value: "work" },
        { text: '推广用户工作已领取', value: "work" },
        { text: '发布已领取', value: "announce" },
        { text: '推广用户发布已领取', value: "announcepar" },
        { text: '注册已领取', value: "register" },
        { text: '推广用户注册已领取', value: "registerpar" },
      ],
      logoImg,
      userInfoList: [],
      showOverlay: false,
      searchBoxShow: false,
      total: 0,
      params: {
        keyword: '',
        pageIndex: 1,
        pageSize: 20,
      },
    }
  },
  computed:{
    ...mapGetters(['allUserInfo'])
  },
  mounted(){
    this._getStocks("receive")
  },

  methods: {
    async _getStocks(type="receive") {
      let paramsObj = {
        ...this.params,
        takeStatus: 1,
        collectType:type,
        userId:this.allUserInfo.id,
      }
      // params.takeStatus = 1  //0未领取; 1已领取
      // const res = await this.$api.others.getInvitatioStocks(paramsObj);
      
      const res = await this.$api.others.getcollectstocklist(paramsObj);
      if (res.code === 200){
        this.userInfoList = res.data.stocks || []
        this.total = res.data.count || 0
      };
    },
    handleSearch() {
      this.params.pageIndex = 1
      if(this.params.keyword.trim()){
        this._getStocks();
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return
      };
      this.params.keyword = '';
      this.params.pageIndex = 1;

      this.$nextTick(() => {
        this._getStocks()
      })
    },

    changePagination(pageIndex) {
      //console.log('翻页', pageIndex);
      this.params.pageIndex = pageIndex;
      this._getStocks()
    },


    toApplyDetail(item){
      this.$router.push({
        name: 'applyDetail',
        query: {
          applyId: item.applyid,
          applyUserId: item.apply_userid,
        }}
      )
    },


  },



};
</script>

<style lang="scss" scoped>
.page_receivedStock /deep/ .van-dropdown-menu__bar{
  box-shadow: unset;
}
.page_receivedStock /deep/ .van-dropdown-menu{
  max-width: 60px;
}
.van-dropdown-menu__bar{
  box-shadow: unset;
}
.page_receivedStock{
  width: 100%;
  .right-detail{
    text-align: center;
    .isReceived{
      margin-top: 6px;
      /deep/ .van-tag{
        padding: 2px;
      }
    }
    .detail{
      margin-top: 6px;
    }
  }
}
</style>
